<div class="ast-tree-layout" (click)="closeContextMenu()">
  <!-- macOS风格标题栏 -->
  <div class="macos-titlebar">
    <div class="titlebar-buttons">
      <div class="titlebar-button close"></div>
      <div class="titlebar-button minimize"></div>
      <div class="titlebar-button maximize"></div>
    </div>
    <div class="titlebar-title">
      <span class="titlebar-icon">🌳</span>
      AST Viewer
    </div>
  </div>

  <div class="markdown-raw" *ngIf="markdown() as md">
    <div class="markdown-header">
      <span class="markdown-title">Markdown Source</span>
      <span class="markdown-hint">(clickable & right-click for menu)</span>
      <div class="debug-info" *ngIf="hoveredNode() as hovered; else debugPlaceholder">
        <span class="debug-label">悬停: {{ hovered.type }}</span>
        <span class="debug-offset" *ngIf="hovered.startOffset !== undefined">
          ({{ hovered.startOffset }}-{{ hovered.endOffset }})
        </span>
      </div>
      <ng-template #debugPlaceholder>
        <div class="debug-placeholder"></div>
      </ng-template>
      <button class="clear-selection-btn" *ngIf="selectedNode()" (click)="clearSelection()" title="取消选中 (Esc)">
        ✕
      </button>
    </div>
    <ng-container *ngIf="getHighlightRange() as range; else plainMd">
      <ng-container *ngIf="range.start >= 0 && range.end >= 0; else plainMd">
        <pre class="markdown-pre interactive-markdown" (click)="onMarkdownClick($event)"
          (contextmenu)="onMarkdownContextMenu($event)" (mousemove)="onMarkdownMouseMove($event)"
          (mouseleave)="onMarkdownMouseLeave()">{{ md.slice(0, range.start) }}<mark>{{ md.slice(range.start, range.end)
            }}</mark>{{ md.slice(range.end) }}</pre>
      </ng-container>
    </ng-container>
    <ng-template #plainMd>
      <pre class="markdown-pre interactive-markdown" (click)="onMarkdownClick($event)"
        (contextmenu)="onMarkdownContextMenu($event)" (mousemove)="onMarkdownMouseMove($event)"
        (mouseleave)="onMarkdownMouseLeave()">{{ md }}</pre>
    </ng-template>
  </div>

  <!-- 面包屑导航 -->
  <div class="breadcrumb-container" *ngIf="breadcrumb().length > 0">
    <div class="breadcrumb">
      <ng-container *ngFor="let node of breadcrumb(); let i = index; trackBy: trackBreadcrumbItem">
        <span class="breadcrumb-item" [class.active]="selectedNode() === node" (click)="onBreadcrumbClick(node)"
          [style.animation-delay]="(i * 0.03) + 's'">
          <span class="breadcrumb-icon" *ngIf="node['_expanded']">📂</span>
          <span class="breadcrumb-icon" *ngIf="!node['_expanded'] && node.children">📁</span>
          {{ node.type }}
          <span class="breadcrumb-content" *ngIf="node.name">: {{ node.name }}</span>
        </span>
        <span class="breadcrumb-separator" *ngIf="i < breadcrumb().length - 1"
          [style.animation-delay]="(i * 0.03 + 0.015) + 's'">›</span>
      </ng-container>
      <button class="breadcrumb-clear-btn" (click)="clearSelection()" title="取消选中">
        ✕
      </button>
    </div>
  </div>

  <div class="ast-tree-main">
    <div class="ast-tree-left">
      <ul class="tree-root" *ngIf="!loading() && ast()">
        <ng-container *ngTemplateOutlet="includeNode; context: { $implicit: ast() }"></ng-container>
      </ul>
    </div>
    <div class="ast-tree-right">
      <div class="node-detail" *ngIf="selectedNode() as node">
        <h3>Node Detail</h3>
        <table class="node-table">
          <tr>
            <td>type</td>
            <td>{{ node['type'] }}</td>
          </tr>
          <tr *ngIf="node['name']">
            <td>name</td>
            <td>{{ node['name'] }}</td>
          </tr>
          <tr *ngIf="node['rawContent']">
            <td>rawContent</td>
            <td>{{ node['rawContent'] }}</td>
          </tr>
          <tr *ngIf="node['content']">
            <td>content</td>
            <td>{{ node['content'] }}</td>
          </tr>
          <tr *ngIf="node['startOffset'] !== undefined">
            <td>startOffset</td>
            <td>{{ node['startOffset'] }}</td>
          </tr>
          <tr *ngIf="node['endOffset'] !== undefined">
            <td>endOffset</td>
            <td>{{ node['endOffset'] }}</td>
          </tr>
          <tr *ngIf="node['url']">
            <td>url</td>
            <td><a [href]="node['url']" target="_blank">{{ node['url'] }}</a></td>
          </tr>
          <tr *ngIf="node['title']">
            <td>title</td>
            <td>{{ node['title'] }}</td>
          </tr>
        </table>
        <span *ngIf="node['children'] && node['children'].length > 0" style="color:#888;font-size:13px;">children: {{
          node['children'].length }}</span>
      </div>
    </div>
  </div>
  <span *ngIf="loading()">加载中...</span>
  <span *ngIf="error()">{{ error() }}</span>
  <ng-template #includeNode let-node>
    <li class="tree-node" [class.selected]="selectedNode() === node"
      [attr.data-node-id]="node.type + '-' + (node['startOffset'] || '')">
      <div class="node-row" (click)="select(node, $event)">
        <span class="toggle-btn" *ngIf="node['children'] && node['children'].length > 0"
          (click)="toggle(node); $event.stopPropagation();">
          <span *ngIf="node['_expanded']">▼</span>
          <span *ngIf="!node['_expanded']">▶</span>
        </span>
        <span class="node-type">{{ node['type'] }}</span>
        <span class="node-label" *ngIf="node['name']">{{ node['name'] }}</span>
      </div>
      <ul *ngIf="node['children'] && node['_expanded']">
        <ng-container *ngFor="let child of node['children']">
          <ng-container *ngTemplateOutlet="includeNode; context: { $implicit: child }"></ng-container>
        </ng-container>
      </ul>
    </li>
  </ng-template>

  <!-- 右键菜单 -->
  <div class="context-menu" *ngIf="contextMenu().visible" [style.left.px]="contextMenu().x"
    [style.top.px]="contextMenu().y" (click)="$event.stopPropagation()">
    <div class="context-menu-item" (click)="highlightNode()">
      <span class="menu-icon">🔍</span>
      高亮显示节点
    </div>
    <div class="context-menu-item" (click)="copyNodeInfo()">
      <span class="menu-icon">📋</span>
      复制节点信息
    </div>
    <div class="context-menu-item" (click)="clearSelection()">
      <span class="menu-icon">🚫</span>
      取消选中
    </div>
    <div class="context-menu-item" (click)="closeContextMenu()">
      <span class="menu-icon">❌</span>
      关闭
    </div>
  </div>
</div>